Option 1 (divs)

Source

<div class="notecard warning">

**My warning**: don't ever do this.
  
</div>

Abstract

<div class="notecard warning">

<p><strong>My warning</strong>: don't ever do this.</p>
  
</div>

Post-Yari

<!-- Yari does nothing -->
<div class="notecard warning">

<p><strong>My warning</strong>: don't ever do this.</p>
    
</div>

Option 1a (custom elements)

Source

<mdn-warning>

**My warning**: don't ever do this.
  
</mdn-warning>

Abstract

<mdn-warning>

<p><strong>My warning</strong>: don't ever do this.</p>
  
</mdn-warning>

Post-Yari

<!-- Yari subs out the custom element with a div of the corresponding class or styles against the custom element name directly --->
<div class="notecard warning">

<p><strong>My warning</strong>: don't ever do this.</p>
    
</div>

Option 2 (blockquotes)

Source

> ###### Note
> This could be a note

Abstract

<blockquote>
<h6>Note</h6>
<p>This could be a note.</p>
</blockquote>

Post-Yari

<!-- Yari finds blockquotes starting with an H6, strips the H6, and applies a class? Not entirely clear from Florian's description -->
<blockquote class="notecard note">
<p>This could be a note.</p>
</blockquote>

Option 3 (single paragraph)

Source

**Note:** This is a single paragraph note.

Abstract

<p><strong>Note:</strong> This is a single paragraph note.</p>

Post-Yari

<!-- Yari finds paragraphs starting with `<strong>Note:</strong>` and applies a class? -->
<p class="notecard note"><strong>Note:</strong> This is a single paragraph note.</p>